<template>
  <div class="ladder-radio-wrapper">
    <div class="radio-box" @click="handleClick">
      <div class="checked-no" :class="{ 'checked-yes': Boolean(checked) }"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Radio',
  props: {
    checked: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleClick() {
      this.$emit('change', !this.checked);
    },
  },
};
</script>

<style lang="less" scoped>
.ladder-radio-wrapper {
  display: inline-block;
  .radio-box {
    .checked-no {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 1px solid #999;
    }
    .checked-yes {
      animation: hxmui-fade-in 0.3s both ease-in;
      background: url('./img/icon-checked.png') no-repeat;
      background-position: center;
      background-size: contain;
      border-width: 0;
    }
  }
}
</style>
